import React, { useImperativeHandle, forwardRef, useState } from 'react';
import { View, Text, StyleSheet, SafeAreaView, Modal, TouchableWithoutFeedback } from 'react-native'
import { connect } from 'react-redux'
import { pTx } from "../utils/dimensions"
import { useNavigation } from '@react-navigation/native';

const mapState = state => {
    return {
    }
}

const AddModalWallet = React.forwardRef((props, ref) => {
    const [open, setOpen] = useState(false)
    const [network, setNetwork] = useState(null)
    const navigation = useNavigation();
    const toNavigate = () => {
        setOpen(false)
        navigation.navigate('importWalletMethod', { network })
    }
    toCreateWalletMnemonic = () => {
        setOpen(false)
        navigation.navigate('createWalletMnemonic', { network })
    }
    const show = (id) => {
        setOpen(true)
        setNetwork(id)
    }
    useImperativeHandle(ref, () => ({
        show,
    }))


    return (
        <Modal
            visible={open}
            animationType="fade"
            transparent={true}
        >
            <TouchableWithoutFeedback onPress={() => setOpen(false)}>
                <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                        <Text style={styles.button} onStartShouldSetResponderCapture={(ev) => true} onPress={() => toCreateWalletMnemonic()}>创建钱包</Text>
                        <Text style={styles.button} onStartShouldSetResponderCapture={(ev) => true} onPress={() => toNavigate()}>导入钱包</Text>
                        <Text style={styles.close} onStartShouldSetResponderCapture={(ev) => true} onPress={() => setOpen(false)}>取消</Text>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        </Modal >
    );
})

export default connect(mapState, {}, null, { forwardRef: true })(AddModalWallet)

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "flex-end",
        alignItems: "stretch",
        backgroundColor: "rgba(0,0,0,0.1)",
    },
    modalView: {
        width: pTx(375),
        backgroundColor: "white",
        borderRadius: pTx(6),
        shadowColor: "rgba(0,0,0,0.5)",
        shadowOffset: {
            width: 0,
            height: 1
        },
        shadowOpacity: 0.1,
        shadowRadius: 1,
        elevation: 5,
        backgroundColor: "#fff",
    },
    button: {
        fontSize: pTx(16),
        color: "#2B7FFB",
        textAlign: "center",
        paddingVertical: pTx(20),
        borderBottomWidth: 1,
        borderColor: "rgba(175, 181, 189, 0.15)"
    },
    close: {
        fontSize: pTx(16),
        paddingVertical: pTx(20),
        textAlign: "center",
        borderTopWidth: pTx(15),
        borderColor: "rgba(175, 181, 189, 0.15)"
    }
})